<template>
  <view class="content">
    <view class="avatorWrapper">
      <view class="avator">
        <image
          class="img"
          src="../../../static/logo.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <u-form class="form" :model="LoginForm" ref="uForm">
      <u-form-item prop="username" class="inputWrapper">
        <u-input v-model="LoginForm.username" placeholder="用户名" />
      </u-form-item>
      <u-form-item prop="userPas" class="inputWrapper">
        <u-input
          type="password"
          placeholder="请输入密码"
          v-model="LoginForm.userPas"
        />
      </u-form-item>
      <view class="loginBtn">
        <view class="btnValue" @click="handleLogin">登录</view>
      </view>
    </u-form>
  </view>
</template>

<script>
import api from '@/api/teach/api.js'
export default {
  data() {
    return {
      LoginForm: {
        username: '',
        userPas: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur',
          },
        ],
        userPas: [
          {
            required: true,
            message: '请输入密码',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    handleLogin() {
      let parme = {}
      parme.account = this.LoginForm.username
      parme.password = this.LoginForm.userPas
      parme.type = 1
      console.log(parme)
      this.$http
        .getMethod(api.login, parme)
        .then((res) => {
          if (res.code != 200) {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
          } else {
            uni.navigateTo({
              url: '/pages/teacher/index/index?teacherId=' + res.data.teacherId,
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
}
</script>

<style scoped>
.content {
  background: #377eb4;
  width: 100vw;
  height: 100vh;
}
.avatorWrapper {
  height: 30vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.avator {
  width: 200upx;
  height: 200upx;
  overflow: hidden;
}
.avator .img {
  width: 100%;
}
.form {
  padding: 0 100upx;
  margin-top: 80px;
}
.inputWrapper {
  width: 100%;
  height: 100upx;
  background: white;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 0 20px;
  margin-top: 25px;
}
.inputWrapper .input {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 15px;
}
.loginBtn {
  width: 100%;
  height: 80upx;
  background: #77b307;
  border-radius: 50upx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginBtn .btnValue {
  color: white;
}
.registerBtn {
  width: 100%;
  height: 80upx;
  background: white;
  border-radius: 50upx;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.registerBtn .btnValue {
  color: black;
}
.forgotBtn {
  text-align: center;
  color: #eaf6f9;
  font-size: 15px;
  margin-top: 20px;
}
</style>
